<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Data Dashboard</title>
  <!-- 引入Echarts库 -->
  <script src="js/echarts.min.js"></script>
  <script src="js/axios.min.js"></script>
  <!-- 页面样式 -->
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #dashboard {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: flex-start;
      width: 100%;
      height: 100vh;
      gap: 16px;
    }

    .chart {
      width: 46%;
      height: 60%;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>

<body>
  <div id="dashboard">
    <!-- 饼图1容器 -->
    <div id="pieChart1" class="chart"></div>
    <!-- 饼图2容器 -->
    <div id="pieChart2" class="chart"></div>
    <!-- 柱状图1容器 -->
    <div id="barChart1" class="chart"></div>
    <!-- 柱状图2容器 -->
    <div id="barChart2" class="chart"></div>
    <!-- 折线图1容器 -->
    <div id="lineChart1" class="chart"></div>
    <!-- 折线图2容器 -->
    <div id="lineChart2" class="chart"></div>
  </div>

  <script>
    let genderRatio = [];
    let majorRatio = [];
    let majorRanking = [];
    let gradeCount = []
    let classCount = []
    const majorGender = { marjor: {}, male: {}, female: {} }

    const origin = "http://127.0.0.1:8080/user";
    const pieChart1 = echarts.init(document.getElementById("pieChart1"));
    const pieChart2 = echarts.init(document.getElementById("pieChart2"));

    const barChart1 = echarts.init(document.getElementById("barChart1"));
    const barChart2 = echarts.init(document.getElementById("barChart2"));

    const lineChart1 = echarts.init(document.getElementById("lineChart1"));
    const lineChart2 = echarts.init(document.getElementById("lineChart2"));

    const getData = async () => {
      try {
        // 男女比例
        const response = await axios.get(origin + "/gender/ratio");
        console.log(response);
        genderRatio = response.data;
        console.log(genderRatio);
        //各专业人数比例
        const response2 = await axios.get(origin + "/major/student/ratio");
        majorRatio = response2.data;
        //各专业学生人数排名
        const response3 = await axios.get(origin + "/major/student/num");
        majorRanking = response3.data;
        //各年级人数
        const response4 = await axios.get(origin + "/grade/student/num");
        gradeCount = response4.data
        //各班级人数
        const response5 = await axios.get(origin + "/banji/student/num");
        classCount = response5.data
        //各专业男女
        const response6 = await axios.get(origin + "/major/boy/girl/num");
        let data = response6.data
        majorGender.marjor = data.map(item => item.major);
        majorGender.male = data.map(item => item.boyNum);
        majorGender.female = data.map(item => item.girlNum);
      } catch (error) {
        console.error("Error fetching data:", error);
        return null;
      }
    };


    const anotherData = {
      categoryA: 30,
      categoryB: 70,
    };
    const yetAnotherData = [
      { category: "X", value: 40 },
      { category: "Y", value: 60 },
    ];

    const setOptions = () => {
      // 初始化Echarts实例

      // 绘制饼图1
      const pieOption1 = {
        title: {
          text: "在校生性别比例",
        },
        series: [
          {
            type: "pie",
            data: genderRatio,
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {d}%",
        },
        legend: {
          orient: "horizontal",
          right: "10%",
        },
      };

      // 绘制饼图2
      const pieOption2 = {
        title: {
          text: "各专业人数比例",
        },
        series: [
          {
            type: "pie",
            data: majorRatio,
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {d}%",
        },
        legend: {
          orient: "horizontal",
          right: "10%",
        },
      };

      // 绘制柱状图1
      const barOption1 = {
        title: {
          text: "各专业学生人数排名",
        },
        xAxis: {
          type: "category",
          data: majorRanking.map((item) => item.name),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: majorRanking.map((item) => item.value),
          },
        ],
      };

      // 绘制柱状图2
      const barOption2 = {
        xAxis: {
          type: "category",
          data: majorGender.marjor,
        },
        yAxis: {
          type: "value",
        },
        title: {
          text: '各专业男女数量柱状图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            name: '男生',
            type: 'bar',
            data: majorGender.male,
          },
          {
            name: '女生',
            type: 'bar',
            data: majorGender.female,
          }
        ]
      };

      // 绘制折线图1
      const lineOption1 = {
        title: {
          text: "各年级学生人数统计",
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: "category",
          data: gradeCount.map((item) => item.name),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: gradeCount.map((item) => item.value),
          },
        ],
      };

      // 绘制折线图2
      const lineOption2 = {
        title: {
          text: "各班级学生人数统计前六位",
        },
        xAxis: {
          type: "category",
          data: classCount.map((item) => item.name),
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: classCount.map((item) => item.value),
          },
        ],
      };
      pieChart1.setOption(pieOption1);
      pieChart2.setOption(pieOption2);
      barChart1.setOption(barOption1);
      barChart2.setOption(barOption2);
      lineChart1.setOption(lineOption1);
      lineChart2.setOption(lineOption2);
    };

    async function init() {
      await getData();
      setOptions();
    }
    init();
    window.onresize = function () {
      pieChart1.resize();
      pieChart2.resize();
      barChart1.resize();
      barChart2.resize();
      lineChart1.resize();
      lineChart2.resize();
    };
  </script>
</body>

</html>